<template>
  <div class="home">
    <el-container>
      <!-- 主体 -->
      <el-main>
        <!-- 登录后台 -->
        <el-row type="flex" justify="end">
          <el-col :span="6">
            <el-button @click="toLogin" class="loginbtn">登录后台</el-button>
          </el-col>
        </el-row>
        <!-- logo -->
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <el-image :src="require('../assets/home/book.png')" class="mainimg" />
          </el-col>
        </el-row>
        <!--输入框-->
        <el-row type="flex" justify="center">
          <el-col :span="16">
            <el-input class="inputbox" placeholder="搜寻你想要的书名" suffix-icon="el-icon-search" v-model="input"
              @keyup.enter="doSearch">
            </el-input>
          </el-col>
        </el-row>
        <!-- 搜索按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="6">
            <el-button type="info" size="small" @click="doSearch" class="searchbtn">
              <router-link :to="{name: 'About'}" class="searchLink">search</router-link>
            </el-button>
          </el-col>
        </el-row>

      </el-main>
      <!-- 页尾 -->
      <el-footer>
        <!-- 二维码 -->
        <el-row type="flex" justify="center">
          <el-col :span="4">
            <el-image :src="require('../assets/home/codeerwei.png')" class="footerImg"></el-image>
          </el-col>
        </el-row>
        <!-- title -->
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <span class="title">即刻加入学友书店微信群</span>
          </el-col>
        </el-row>
        <!-- subtitle -->
        <el-row type="flex" justify="center">
          <el-col :span="10">
            <span class="subtitle">学友书店 应有尽友</span>
          </el-col>
        </el-row>
        <!-- aboutlink -->
        <el-row type="flex" justify="center" class="aboutlink">
          <el-col :span="4">
            <el-link type="info" href="" class="aboutlink">学友书店</el-link>
          </el-col>
          <el-col :span="6">
            <el-link type="info" href="" class="aboutlink">关于开发者</el-link>
          </el-col>
          <el-col :span="6">
            <el-link type="info" href="" class="aboutlink">About NJU</el-link>
          </el-col>
          <el-col :span="4">
            <el-link type="info" href="" class="aboutlink">联系我们</el-link>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    data() {
      return {
        input: "",
      }
    },
    components: {

    },
    methods: {
      doSearch: function () {
        this.$store.commit('changeSearch', this.input);
        this.$router.push({
          name: "About",
          path: '/about',
          params: {
            
          }
        });
      },
      toLogin() {
        this.$router.push({
          name: "Login",
          path: '/login',
          params: {}
        });
      }
    },

  }
</script>

<style scoped>
  .el-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .home {
    height: 100%;
  }

  .el-container {
    height: 100%;
    background-color: #f3ebe1;
  }

  /* ---------------main--------------- */

  .el-main {
    /* background-color: aquamarine; */
    /* min-height: 60%; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 6;
  }

  .loginbtn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    max-width: 90px;
  }

  .mainimg {
    max-width: 180px;
    height: auto;
    /* margin-top: 8%; */
    /* 图片上方距离 */
  }

  .inputbox {
    max-width: 720px;
  }

  .searchbtn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    max-width: 100px;
  }

  .searchLink {
    text-decoration: none;
    color: white;
  }

  /* ---------------footer--------------- */

  .el-footer {
    margin: 20px 0;
    display: flex;
    flex: 4;
    flex-direction: column;
    justify-content: space-around;
  }

  .el-footer .el-row:nth-child(1) {
    flex: 4;
    margin-top: 5%;
  }

  .el-footer .el-row:nth-child(2) {
    flex: 3;
  }

  .el-footer .el-row:nth-child(3) {
    flex: 2;
    margin-bottom: 5%;
  }

  .el-footer .el-row:nth-child(4) {
    flex: 1;
    margin-bottom: 5%;
  }

  .footerImg {
    height: auto;
    max-width: 70px;
  }

  .title {
    font-size: 16px;
  }

  .subtitle {
    font-size: 14px;
  }

  .aboutlink {
    font-size: 12px;
  }

  @media screen and (min-width:1000px) {
    .el-footer .el-row:nth-child(1) {
      flex: 4;
      margin-top: 5%;
      margin-bottom: 2%;
    }

    .el-footer .el-row:nth-child(2) {
      flex: 3;
      margin-bottom: 1%;
    }

    .el-footer .el-row:nth-child(3) {
      flex: 2;
      margin-bottom: 5%;
    }

    .el-footer .el-row:nth-child(4) {
      flex: 1;
      margin-bottom: 5%;
    }
  }

  @media screen and (max-width:374px) {
    .title {
      font-size: 12px;
    }

    .subtitle {
      font-size: 10px;
    }

    .aboutlink {
      font-size: 10px;
      -webkit-transform: scale(0.8);
    }
  }
</style>